<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/kit/layui/css/layui.css">
    <title>Document</title>
    <style>
        h2 {
            text-align: center;
        }
    </style>
</head>

<body>
    <h2>订单列表</h2>
    <table class="layui-hide" id="myorder" lay-filter="myorder"></table>
</body>

<script type="text/html" id="state">
    <!-- 0:未发货 1：已发货 2:已签收 3：退货发起 4：退货中 5：订单取消 6：订单完成 -->
    {{#  if(d.state == 0){ }}
<button type="button" class="layui-btn  layui-btn-sm  layui-btn-radius  layui-bg-cyan">未发货</button>
{{#  } }}
{{#  if(d.state == 1){ }}
<button type="button" class="layui-btn  layui-btn-sm  layui-btn-radius layui-bg-blue">已发货</button>
{{#  } }}
{{#  if(d.state == 2){ }}
<button type="button" class="layui-btn  layui-btn-sm  layui-btn-radius">已签收</button>
{{#  } }}
{{#  if(d.state == 3){ }}
<button type="button" class="layui-btn  layui-btn-sm  layui-btn-radius layui-bg-orange">退货发起</button>
{{#  } }}
{{#  if(d.state == 4){ }}
<button type="button" class="layui-btn  layui-btn-sm  layui-btn-radius layui-bg-gray">退货中</button>
{{#  } }}
{{#  if(d.state == 5){ }}
<button type="button" class="layui-btn  layui-btn-sm  layui-btn-radius layui-btn-disabled">订单取消</button>
{{#  } }}
{{#  if(d.state == 6){ }}
<button type="button" class="layui-btn  layui-btn-sm  layui-btn-radius">订单完成</button>
{{#  } }}
</script>

<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    {{#  if(d.state == 0){ }}
        <a class="layui-btn layui-btn-xs" lay-event="express">发货</a>
    {{#  } }} 
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="edit">编辑</a>
</script>
<script type="text/html" id="express">
    {{#  if(d.express_date ){ }}
        {{timestampToTime(d.express_date)}}
    {{#  } }} 
</script>
<script type="text/html" id="order">
    {{#  if(d.order_date){ }}
        {{timestampToTime(d.order_date)}}
    {{#  } }} 
</script>

<script src="/kit/layui/layui.js"></script>
<script>
    function timestampToTime(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m = date.getMinutes() + ':';
        var s = date.getSeconds();
        return Y + M + D + h + m + s;
    }

    layui.use(['table', 'form'], function () {
        let data;
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;

        $.ajax({
            type: 'GET',
            url: '/php/api/order/v1.api.list.php',
            dataType: 'json'
        }).done(function (data) {
            // console.log(data);
            //展示已知数据
            table.render({
                elem: '#myorder',
                cols: [[ //标题栏
                    { field: 'order_id', title: 'ID', sort: true },
                    { field: 'user_id', title: '用户id', },
                    { field: 'price', title: '总价格', },
                    { field: 'express_number', title: '快递单号' },
                    { field: 'express_date', title: '发货时间', templet: '#express' },
                    { field: 'address', title: '地址' },
                    { field: 'phone', title: '联系电话', },
                    { field: 'state', title: '状态', templet: '#state' },
                    { field: 'order_date', title: '下单时间', sort: true, templet: '#order' },
                    { field: 'operation', title: '操作', templet: '#bar', width: 180 },
                ]]
                , data: data.data
                //,skin: 'line' //表格风格
                , even: true
                , page: {
                    count: data.size
                }
                //,limits: [5, 7, 10]
                , limit: 10 //每页默认显示的数量
            });
            table.on('tool(myorder)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.open({
                        title: '订单详情',
                        type: 2,
                        content: '/view/order/detail.html?order_id=' + data.order_id,
                        area: ['800px', '600px']
                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                        title: '修改订单',
                        type: 2,
                        content: '/view/order/mod.html?order_id=' + data.order_id,
                        end:function(){
                            window.location.reload();
                        },
                        area: ['800px', '600px']
                    });

                } else if (obj.event === 'express') {
                    layer.open({
                        content: `
                            <form class="layui-form">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">输入框</label>
                                    <div class="layui-input-inline">
                                    <input type="text" name="" id="num" placeholder="请输入快递单号" autocomplete="off" class="layui-input" lay-verify="number">
                                    </div>
                                </div>
                            </form>
                        `
                        ,
                        title: "填写快递单"
                        , btn: ['发货', '取消']
                        , yes: function (index, layero) {
                            //按钮【按钮一】的回调
                            $num = parseInt($("#num").val());
                            $.ajax({
                                type: 'post',
                                url: '/php/api/order/v1.api.mod.php',
                                data: {
                                    type: 1,
                                    express_number: $num,
                                    order_id: data.order_id
                                },
                                dataType: 'json'
                            }).done(function (data) {
                                if (data.code == 200) {
                                    layer.msg("发货成功");
                                    window.location.reload();
                                }
                            }).fail(function () {
                                console.log(data.goods_id)
                            })
                        }
                    });
                }
            });
        })
    });
</script>

</html>